<template>
  <div class="page-content" v-loading="loading">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="4" class="el-col2">
        <el-button type="danger" icon="el-icon-plus" @click="showDialog('add')"
          >新增部门</el-button
        >
      </el-col>
    </el-row>

    <el-row style="margin-top: 15px">
      <k-table
        :data="DepartmentData"
        :showPage="false"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        size="mediul"
        @sortHandler="sort($event)"
      >
        <el-table-column fixed="left" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="showDialog('edit', scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              style="color:#ffc107"
              v-if="scope.row.isenable == true"
              icon="el-icon-close"
              @click="WrittenOffDepartmentsHandler(scope.row.id, false)"
            >
              注销
            </el-button>
            <el-button
              type="text"
              style="color:#ff0000"
              v-else
              icon="el-icon-check"
              @click="WrittenOffDepartmentsHandler(scope.row.id, true)"
            >
              恢复
            </el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="delDepartmentsHandler(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="isenable" label="是否启用" sortable="custom">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="scope.row.isenable === true ? '' : 'info'"
            >
              {{ scope.row.isenable === true ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="sortno"
          label="排序"
          sortable="custom"
        ></el-table-column>
        <el-table-column label="部门图片" prop="departimg">
          <template slot-scope="scope">
            <img class="avatar" :src="scope.row.departimg" />
          </template>
        </el-table-column>
        <el-table-column
          prop="departname"
          label="部门名称"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="writedate"
          label="日期"
          sortable="custom"
        ></el-table-column>
      </k-table>
    </el-row>

    <el-dialog
      :title="dialogTitle"
      width="500px"
      :visible.sync="isAddorEdit"
      @closed="closeDialog"
      top="25vh"
      :close-on-click-modal="false"
    >
      <el-form ref="depform" :model="depform" label-width="88px">
        <el-form-item label="部门名称">
          <el-input v-model="depform.departname" prop="departname"></el-input>
        </el-form-item>
        <el-form-item label="展示排序">
          <el-input-number
            v-model="depform.sortno"
            prop="sortno"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="depform.isenable" prop="isenable"></el-switch>
        </el-form-item>
        <el-form-item label="部门LOGO">
          <el-upload
            :action="dataUrl"
            :data="uploadData"
            :show-file-list="false"
            :before-upload="beforeUpload"
            list-type="picture-card"
            :on-success="upload_success"
          >
            <img
              v-if="dialogImageUrl"
              :src="dialogImageUrl"
              width="130"
              style="padding-top:10px"
            />
            <i v-else class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，建议图片比例：<span>120*120</span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          v-if="dvEdit == false"
          @click="addDepartmentsHandler"
          >{{ btntext }}</el-button
        >
        <el-button
          type="primary"
          v-else
          @click="editDepartmentsHandler(depform.id)"
          >{{ btntext }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDepartmentApi } from "@/api/cardApi";
import { GetDepartmentDetailApi } from "@/api/cardApi";
import { DepartmentApi } from "@/api/cardApi";
import moment from "moment";
import { baseUrl } from "@/utils/config";
export default {
  inject: ["reload"],
  data() {
    return {
      isAddorEdit: false,
      dvEdit: false,
      dialogTitle: "",
      props: {
        label: "name",
        children: "zones"
      },
      count: 1,
      depform: {
        id: "",
        departname: "",
        sortno: "",
        departnameimg: "",
        isenable: true
      },
      DepartmentData: [],
      loading: true,
      btntext: "",
      imgurl: "http://img.inheart.cn",
      dataUrl: "",
      uploadData: {
        guestcode: "",
        gscode: ""
      },
      dialogImageUrl: "",
      uploadimg: ""
    };
  },
  mounted() {
    this.getDepartmentData("", "");
  },
  methods: {
    getDepartmentData(prop, order) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      let sort = "";
      if (order != undefined && order.length > 0 && order != null) {
        if (order == "ascending") {
          sort = prop + " asc ";
        } else if (order == "descending") {
          sort = prop + " desc ";
        }
      }
      getDepartmentApi({
        guestcode: guestcode,
        gscode: gscode,
        sort: sort,
        username: username,
        userid: userid,
        menuename: "Department",
        menucname: "部门管理",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.loading = false;
        if (res.code == "0") {
          res.data.forEach(element => {
            element.departimg = this.imgurl + element.departimg;
            element.writedate = moment(element.writedate).format(
              "YYYY-MM-DD hh:mm:ss"
            );
          });
          this.DepartmentData = res.data;
        }
      });
    },
    addDepartmentsHandler() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      DepartmentApi({
        guestcode: guestcode,
        gscode: gscode,
        sType: "Add",
        departname: this.depform.departname,
        departimg: this.uploadimg,
        sortno: this.depform.sortno,
        isenable: this.depform.isenable,
        menuename: "Department",
        menucname: "部门管理",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: "新增",
        note: JSON.stringify(this.depform)
      }).then(res => {
        if (res.code == "0") {
          this.$message.success("添加成功");
          this.refresh();
        }
      });
    },
    editDepartmentsHandler(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      DepartmentApi({
        guestcode: guestcode,
        gscode: gscode,
        sType: "Edite",
        departname: this.depform.departname,
        departimg: this.uploadimg,
        sortno: this.depform.sortno,
        isenable: this.depform.isenable,
        id: val,
        menuename: "Department",
        menucname: "部门管理",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: "更新",
        note: JSON.stringify(this.depform)
      }).then(res => {
        if (res.code == "0") {
          this.$message.success("修改成功");
          this.refresh();
        }
      });
    },
    delDepartmentsHandler(val) {
      this.$confirm("您确定要删除当前部门吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          DepartmentApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Delete",
            id: val,
            menuename: "Department",
            menucname: "部门管理",
            username: username,
            userid: userid,
            logintype: logintype,
            posttype: posttype,
            op_type: "删除",
            note: val
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("删除成功");
              this.getDepartmentData("", "");
            }
          });
        })
        .catch(() => {});
    },
    WrittenOffDepartmentsHandler(val, valbool) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      DepartmentApi({
        guestcode: guestcode,
        gscode: gscode,
        sType: "WrittenOff",
        id: val,
        isenable: valbool,
        menuename: "Department",
        menucname: "部门管理",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: valbool == true ? "恢复" : "注销",
        note: val
      }).then(res => {
        if (res.code == "0") {
          if (valbool == true) {
            this.$message.success("恢复成功");
          } else {
            this.$message.success("注销成功");
          }
          this.getDepartmentData("", "");
        }
      });
    },
    getDepartmentDetailHandler(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      GetDepartmentDetailApi({
        guestcode: guestcode,
        gscode: gscode,
        id: val
      }).then(res => {
        this.depform.id = res.data[0].id;
        this.depform.departname = res.data[0].departname;
        this.depform.sortno = res.data[0].sortno;
        this.dialogImageUrl = this.imgurl + res.data[0].departimg;
        this.uploadimg = res.data[0].departimg;
        this.depform.isenable = res.data[0].isenable;
      });
    },
    sort(val) {
      this.getDepartmentData(val.prop, val.order);
    },
    beforeUpload(file) {
      this.uploadData.guestcode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).reguserno;
      this.uploadData.gscode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).gscode;
    },
    refresh() {
      this.reload();
    },
    showDialog(type, val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      this.isAddorEdit = true;
      this.dialogTitle = type === "add" ? "新增部门" : "编辑部门";
      this.dataUrl =
        baseUrl +
        "/api/Card/Departmentimg?guestcode=" +
        guestcode +
        "&gscode=" +
        gscode;
      if (type == "add") {
        this.btntext = "添 加";
      }
      if (type == "edit") {
        this.dvEdit = true;
        this.btntext = "保 存";
        this.getDepartmentDetailHandler(val);
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      // console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      // console.log(data);
    },
    closeDialog() {
      this.isAddorEdit = false;
      this.depform.departname = "";
      this.depform.sortno = "";
      this.depform.isenable = true;
      this.dialogImageUrl = "";
      this.uploadimg = "";
    },
    upload_success(response, file, fileList) {
      this.dialogImageUrl = this.imgurl + file.response.statusText;
      this.uploadimg = file.response.statusText;
      this.getDepartmentData("", "");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@styles/tree.scss";

.page-content {
  width: 100%;
  height: 100%;
  .avatar {
    width: 60px;
    height: 60px;
  }
  .department {
    display: flex;

    .left-wrap {
      width: 300px;

      .line {
        margin: 15px 0;
      }
    }

    .right-wrap {
      flex: 1;
    }
  }
  .el-upload__tip span {
    color: #f56c6c;
  }
}
</style>
